<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span>用户信息</span>
              <div style="float: right">
                <el-button type="primary" plain @click="goGitee"
                  >获取源码</el-button
                >
                <el-button type="primary" :loading="true" plain
                  >用户中心</el-button
                >
              </div>
            </div>
            <div class="img">
              <el-tooltip
                class="item"
                effect="dark"
                content="换头像功能还未实现"
                placement="top-start"
              >
                <el-avatar
                  shape="square"
                  :size="80"
                  :src="userImg"
                  style="margin-right: 50px"
                  :key="1"
                ></el-avatar>
              </el-tooltip>
              <el-table :data="userInfo" border>
                <el-table-column prop="username" label="用户账号">
                </el-table-column>
                <el-table-column prop="nickname" label="用户昵称">
                </el-table-column>
                <el-table-column prop="department" label="所属部门">
                </el-table-column>
                <el-table-column prop="date" label="用户角色">
                  <template scope="scope">
                    <span>{{
                      scope.row.isAdmin ? "超级管理员" : scope.row.role[0]
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card style="height: 125px; margin: 10px 0">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <router-link to="/business/product/list">
                  <img
                    src="../../../assets/1.svg"
                    alt
                    width="60.8px;"
                    style="margin: 0px auto; cursor: pointer; margin-left: 20px"
                  />
                </router-link>
                <div
                  style="font-size: 12px; margin-top: 5px; margin-left: 25px"
                >
                  物资资料
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <router-link to="/business/product/stocks">
                  <img
                    src="../../../assets/2.svg"
                    alt
                    width="60.8px;"
                    style="cursor: pointer; margin-left: 20px"
                  />
                </router-link>
                <div
                  style="font-size: 12px; margin-top: 5px; margin-left: 25px"
                >
                  物资库存
                </div>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <router-link to="/business/product/add-stocks">
                  <img
                    src="../../../assets/3.svg"
                    alt
                    width="60.8px;"
                    style="cursor: pointer; margin-left: 20px"
                  />
                </router-link>

                <div
                  style="font-size: 12px; margin-top: 5px; margin-left: 25px"
                >
                  物资入库
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple"></div>
              <router-link to="/business/product/publish">
                <img
                  src="../../../assets/4.svg"
                  alt
                  width="60.8px;"
                  style="cursor: pointer; margin-left: 20px"
                />
              </router-link>
              <div style="font-size: 12px; margin-top: 5px; margin-left: 25px">
                物资发放
              </div>
            </el-col>
          </el-card>
          <el-card>
            <div id="chart" style="width: 650px; height: 200px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <el-carousel :interval="5000" arrow="always" height="245px">
              <el-carousel-item>
                <img
                  src="../../../assets/ban1.jpg"
                  alt=""
                  width="100%"
                />
              </el-carousel-item>
              <el-carousel-item>
                <img
                  src="../../../assets/ban2.jpg"
                  alt=""
                  width="100%"
                />
              </el-carousel-item>
              <el-carousel-item>
                <img
                  src="../../../assets/ban3.jpg"
                  alt=""
                  width="100%"
                />
              </el-carousel-item>
            </el-carousel>
            <aplayer
              style="margin-top: 20px; margin-bottom: 30px"
              autoplay
              :music="{
                title: 'Airplanes',
                artist: 'Eminem',
                src: 'http://music.163.com/song/media/outer/url?id=26714821.mp3',
                pic: 'http://p4.music.126.net/H9HJibEzTL34aIT6nsqKsQ==/5682276092402519.jpg',
              }"
              :list="musicList"
            ></aplayer>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import aplayer from 'vue-aplayer'
import { getloginLogApi } from '@/api/index.js'
export default {
  components: { aplayer },
  data () {
    return {
      musicList: [
        {
          artist: 'Tinashe',
          lrc: '',
          title: 'Story of Us',
          src: 'http://music.163.com/song/media/outer/url?id=1403428061.mp3',
          pic: 'http://p3.music.126.net/l2XttTpEa14IEZtUsQX1HA==/109951164486978461.jpg'
        },
        {
          artist: 'Chris Brown',
          lrc: '',
          title: 'War For You',
          src: 'http://music.163.com/song/media/outer/url?id=30431534.mp3',
          pic: 'http://p3.music.126.net/YWkl1JXVKm7bOBAew72lGg==/109951163958771792.jpg'
        },
        {
          artist: 'Sarah Darling',
          lrc: '',
          title: 'Jack of Hearts',
          src: 'http://music.163.com/song/media/outer/url?id=19132440.mp3',
          pic: 'http://p4.music.126.net/4q3kpn5VLo3x7hVWttj0QA==/109951164802108652.jpg'
        },
        {
          artist: 'Benjamin Ingrosso',
          lrc: '',
          title: 'Costa Rica',
          src: 'http://music.163.com/song/media/outer/url?id=1372897252.mp3',
          pic: 'http://p4.music.126.net/mmm97zC81t73rToPFuXXnw==/109951164159882466.jpg'
        },
        {
          artist: 'Yo Trane',
          lrc: '',
          title: 'Affection',
          src: 'http://music.163.com/song/media/outer/url?id=1393553542.mp3',
          pic: 'http://p4.music.126.net/T_vdbfQPO4HE4zVE_8rgCQ==/109951164389023010.jpg'
        }
      ]
    }
  },
  methods: {
    goGitee () {
      window.open('https://gitee.com/liningning215/vue_wuzi')
    },
    async getChartsData () {
      const res = await getloginLogApi({ username: this.userInfo.username })
      console.log(res)
      const xdata = res.data.all.map((item) => item.days)
      const myData = res.data.me.map((item) => item.count)
      const allData = res.data.all.map((item) => item.count)
      this.initCharts(myData, allData, xdata)
    },
    initCharts (myData, allData, xdata) {
      const charts = this.$echarts.init(document.getElementById('chart'))
      const option = {
        title: {
          text: '用户登入统计'
        },
        legend: {
          type: 'plain',
          data: ['全部', '我'],
          right: 300
        },
        grid: [
          {
            right: 100,
            bottom: 20,
            left: 50
          }
        ],
        toolbox: {
          show: true,
          right: 100,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false }, //  缩放
            magicType: { type: ['bar', 'line'] },
            restore: {}, // 重置
            saveAsImage: {} // 导出图片
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#eee'
            }
          }
        },
        xAxis: { type: 'category', data: xdata },
        yAxis: {
          type: 'value'
        },
        series: [
          { type: 'bar', name: '我', showBackground: true, data: myData },
          { type: 'bar', name: '全部', showBackground: true, data: allData }
        ]
      }
      charts.setOption(option)
    }
  },
  created () {
    this.getChartsData()
  },
  computed: {
    ...mapGetters(['userImg', 'userInfo'])
  }
}
</script>

<style scoped lang='less'>
.img {
  display: flex;
  justify-content: space-between;
}
</style>
